<template>
    <div class="add common">
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>{{lectureId?'修改':'新增'}}</span>
            </template>
            <div slot="right">
                <a-button type='primary' @click="returnBack()">返回</a-button>
            </div>
            <div slot="table">
                <eform
                v-if="fields||type==0"
                :formData="formData"
                class="form"
                ref="form"
                :fields="fields"
                >
                    <div slot="cover" style="display:flex">
                        <eUpload
                            @getUrl="getUrl"
                            v-decorator="['cover',{rules: [{ required: true, message: '请上传封面' }]}]"
                            :imageUrl="imageUrl"
                        ></eUpload>
                    </div>
                    <div slot="teacherInfo">
                        <a-textarea
                            placeholder="请输入主讲人介绍"
                            v-decorator="['teacherInfo',{rules: [{ required: true, message: '请输入主讲人介绍' }]}]"
                            :autosize="{ minRows: 4, maxRows: 9 }"
                        />
                    </div>
                    <div slot="time">
                        <!-- <a-range-picker 
                        :disabled-date="disabledDate"
                        show-time
                        v-decorator="['time',{rules: [{ required: true, message: '请选择时间' }]}]"
                        :placeholder="['开始时间','结束时间']"
                        /> -->
                        <div v-decorator="['time',{rules: [{ required: true, message: '请选择时间' }]}]">
                            <selectTime
                                @changeTime="changeTime"
                                :defaultTime="defaultTime"
                                v-if="defaultTime.length>0||!this.lectureId"
                                @changeEndTime="defaultTime[1]=null"
                            ></selectTime>
                        </div>
                        
                    </div>
                    <div slot="authentation">
                        <eSilder
                            v-decorator="['authentation',{rules: [{ required: true, message: '请选择权限' }]}]"
                            @changeAuth="changeAuth"
                            :defaultAuthValue="defaultAuthValue"
                        ></eSilder>
                        <!-- <div v-decorator="['authentation',{rules: [{ required: true, message: '请选择权限' }]}]">
                            <a-slider 
                                style="width:50%"
                                :marks="marks" 
                                :step="null" 
                                :tooltipVisible="false"
                                :value="defaultAuthValue"
                                @change="changeAuth"/>
                        </div> -->
                    </div>
                    <div slot="info" class="quillIcon">
                        <eQuill
                            @getQuillContent="getQuillContent"
                            v-decorator="['info',{rules: [{ required: true, message: '请输入直播内容' }]}]"
                            :defaultData="defaultData"
                        ></eQuill>
                    </div>
                </eform>
                <div class="submitBtn">
                    <a-button @click="returnBack()">取消</a-button>
                    <a-button type="primary" @click="save()">保存</a-button>
                </div>
            </div>
        </innerCommon>
    </div>
</template>
<script>
import moment from 'moment'
import 'moment/locale/zh-cn';
import innerCommon from "@/components/common/innerCommon"
import eUpload from "@/components/common/eUpload"
import eSilder from "@/components/common/eSilder"
import eform from "@/components/common/form"
import selectTime from "@/components/common/selectTime"
import {getRoleListApi,submitTeacherLectureApi,getTeacherLectureDetailApi,submitEditTeacherLectureApi} from "@/request/api"
import eQuill from "@/components/common/eQuill"
export default {
    name:'teacherLectureAdd',
    components:{innerCommon,eform,eQuill,eUpload,selectTime,eSilder},
    created(){
        this.lectureId=this.$route.query.info
        this.location=[{
            name:"信息发布管理",
            path:''
        },{
            name:"名师讲堂",
            path:'/teacherLecture'
        },{
            name:this.lectureId?'修改':'新增',
            path:'/teacherLectureAdd'
        }]
        if(this.lectureId){
            this.getToken(getTeacherLectureDetailApi,{'lectureId':this.lectureId},res=>{
                this.fields=res.data
                this.defaultAuthValue=res.data.authentation
                this.imageUrl=res.data.cover
                this.defaultData=res.data.info
                if(res.data.status==2){
                    this.formData[5].disabled=true
                    this.formData[6].isVisible=false
                }
                this.initEdit()
            })
            this.type=1
        }else{
            this.type=0
            this.init()
        }
        
    },
    data(){
        let validateUrl=(rule,value,callback)=>{
            if(value){
                if(value.trim().length === 0){
                    callback(new Error('不能全是空格'))
                }else{
                    let urlreg=/^((https|http|ftp|rtsp|mms)?:\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/ 
                    if(!urlreg.test(value)){
                        callback(new Error('请输入正确的地址'))
                    }else{
                        callback()
                    }
                }
            }else{
                callback()
            }
        }
        const formData=[
            {
                label:"直播名称",
                prop:"title",
                placeholder:'请输入直播名称',
                rules:[{required:true,message:'请输入直播名称'}],
            },{
                label:"直播封面",
                scopedSlots: { customRender: 'cover'},
            },{
                label:"主讲人",
                prop:"teacher",
                placeholder:'请输入主讲人',
                rules:[{required:true,message:'请输入主讲人'}],
            },{
                label:"主讲人介绍",
                scopedSlots: { customRender: 'teacherInfo'},
            },{
                label:"直播时间",
                scopedSlots: { customRender: 'time'},
            },{
                label:"直播地址",
                prop:"url",
                placeholder:'请输入直播地址',
                rules:[{required:true,message:'请输入直播地址'},{validator:validateUrl}],
            },{
                label:"回看地址",
                prop:"playback",
                placeholder:'请输入回看地址',
                rules:[{required:true,message:'请输入回看地址'},{validator:validateUrl}],
                isVisible:true
            },{
                label:"加入权限",
                scopedSlots: { customRender: 'authentation'},
            },{
                label:"直播介绍",
                scopedSlots: { customRender: 'info'},
            }
        ]
        let validateTime=(rule,value,callback)=>{
            if(value){
                let reg=/^1[34578]\d{9}$/
                reg.test(value)?callback():callback(new Error('请输入正确格式的电话'))
            }else{
                callback()
            }
        }
        return{
            validateTime,
            formData,
            location:[],
            fields:null,
            allplainOptions:[],
            plainOptions:[],
            loading:false,
            apiUrl:window.g.apiUrl,
            format:"YYYY-MM-DD HH:mm:ss",
            type:0,//0是新增，1是修改
            imageUrl:'',
            selectType:'',
            selectAuth:'',
            quillInfo:'',
            checkedList:[],
            lectureId:'',
            defaultData:'',
            defaultTime:[],
            defaultAuthValue:0,
            marks: {
                33: 'VIP会员',
                66: '普通会员',
                100:{
                    style:{width:"100px"},
                    label:'注册用户'
                },
            },
        }
    },
    methods:{
        init(){
            this.getToken(getRoleListApi,{},res=>{
                this.allplainOptions=res.data
            })
        },
        initEdit(){
            this.getToken(getRoleListApi,{},res=>{
                this.allplainOptions=res.data
                this.defaultTime=[moment(this.fields.startTime),moment(this.fields.endTime)]
                this.changeTime(moment(this.fields.startTime),moment(this.fields.endTime))
                
                // if(res.data[0].children.join(',')==this.fields.authentation){
                //     this.defaultAuthValue=100
                // }else if(res.data[1].children.join(',')==this.fields.authentation){
                //     this.defaultAuthValue=66
                // }else if(res.data[2].children.join(',')==this.fields.authentation){
                //     this.defaultAuthValue=33
                // }
            })
        },
        returnBack(){
            this.$confirm({
                title: '确认返回吗?',
                cancelText:"取消",
                okText:'确定',
                onOk:()=>{
                    this.$router.push({path:'/teacherLecture'})
                },
                onCancel() {
                },
            });
        },
        changeAuth(data){
            this.$refs.form.form.setFieldsValue({['authentation']:data})
            // this.defaultAuthValue=data
            // if(data==33){
            //     this.selectAuth=this.allplainOptions[2]
            // }else if(data==66){
            //     this.selectAuth=this.allplainOptions[1]
            // }else if(data==100){
            //     this.selectAuth=this.allplainOptions[0]
            // }
            // this.$refs.form.form.setFieldsValue({['authentation']:this.selectAuth.children})
        },
        getQuillContent(data){
            this.quillInfo=data
            this.$refs.form.form.setFieldsValue({['info']:data})
        },
        getUrl(data){
            this.$refs.form.form.setFieldsValue({['cover']:data})
            this.imageUrl=data
        },
        changeTime(start,end){
            this.$refs.form.form.setFieldsValue({['time']:[moment(start).format(this.format),moment(end).format(this.format)]})
        },
        save(){
            this.$refs.form.form.validateFields().then(res=>{
                
                let startTime=res.time[0]
                let endTime=res.time[1]
                if(moment(startTime).valueOf()>moment(endTime).valueOf()){
                    this.$message.error('结束时间要大于开始时间')
                    return
                }
                let api=''
                let formData={
                    ...res,
                    startTime,
                    endTime,
                }
                let submit=()=>{
                    this.getToken(api,formData,res=>{
                        this.$message.success(res.message)
                        this.$router.push({path:'/teacherLecture'})
                    })
                }
                if(this.type==0){
                    api=submitTeacherLectureApi
                    submit()
                }else{
                    api=submitEditTeacherLectureApi
                    formData={...formData,'lectureId':this.lectureId}
                    submit()
                }
            })
        },
        moment,
    }
}
</script>
<style lang="stylus" scoped>
.submitBtn
    display:flex;
    justify-content:center;
    button  
        width:200px;
        &:nth-child(1)
            margin-right:10px;
.time
    display:flex;
    justify-content:space-around
    align-items:center; 
</style>
